<template>
	<view>
		<view class="" style="height: 56px;" v-if="fixed"></view>
		<view :class="{ 'fixed flex center':fixed}" :style="{'backgroundColor': navBg}">
			<view :style="{
				'backgroundColor':navBg,
				'marginLeft':previousMargin,
				'marginReft':nextMargin,
				'borderRadius': borderRadius,
				'overflow':'hidden',
				'height':'56px'
				}" >
				<view v-if="statusH" class="status_bar" :style="{ 'backgroundColor':navBg}"></view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
						<view style="line-height: 48px;">
							<view class="flex scroll-view-items" style="height: 100%;">
								<view>
									<view class="scroll-view-item_H" :style="styleFather" v-for="(item,index) in tabList" :key="index"
										@click="setScrollLeft(index,true)" :id=" 'tabs-'+ index">
										<view :style="{...ButtonStle}" v-if="!slots" class="flex center">
											<text :style="current === index ?activeStyle:{}">{{item.name}}</text>
											<view v-if="nunShow" class="knowledgeNum">{{item.knowledgeNum}}</view>
										</view>
										<!-- 自定义插糟 -->
										<slot name="second" :data="item" v-if="slots"></slot>
									</view>
								</view>
							</view>
							<!-- 选中底部指示线 -->
							<view class="underLine" v-if="Line" :style="{
								'width':itemWidth+'rpx',
								'left':current*itemWidth+itemWidth/4-10+'px',
								'backgroundColor':LineStyle.backgroundColor,
								'borderRadius':LineStyle.borderRadius,
								'height':LineStyle.height
							}"></view>
						</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
	
</template>
<!-- /**
 * 组件说明
 * 属性:
 * 参数                     说明                       	类型                    默认值
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * statusH                是否要手机状态栏占位              Boolean                 false
 * styleFather            tab按钮的父容器样式   	  		Object                 	{}
 * navBg                  导航背景颜色    				String                 	#FFFFFF
 * previousMargin         导航前边距                 	String					0rpx
 * nextMargin 			  导航后边距 		  			String					0rpx
 * current 			 	  当前选择tab按钮位置			Number					0
 * tabList 				  tab选项卡渲染数据			    Array 					[]
 * borderRadius 		  导航最外层设置圆角				String 					0rpx
 * LineStyle 			  选中的tab按钮底部指示线 		Object 					{backgroundColor: '#F13B2D',borderRadius:"5rpx",bottom:'6rpx',height:'5rpx'}
 * Line 				  是否开启按钮底部指示线 		Boolean 				false
 * slots 				  是否开启插糟			 		Boolean 				false
 * ButtonStle 			  设置按钮样式					Object 					{width: '100rpx',height: '50rpx',padding: '10rpx'}
 * activeStyle 			  选中文字样式					Object 					{fontWeight: '600',color: '#F13B2D'}
 * fixed 				  是否fixed定位顶部				Boolean 				false
 
 * 回调事件:
 * tabClick tab点击事件回调，返回对应的下标和item数据
 */ -->
<script>
	let that = null
	export default {
		name: "scrolltabs",
		props: {
			nunShow: {
				type: Boolean,
				default: false
			},
			fixed:{ 
				type: Boolean,
				default: false
			},
			seat: {
				type: Boolean,
				default: true
			},
			activeStyle: {
				type: Object,
				default: () => ({
					fontWeight: '600',
					color: '#F13B2D',
				})
			},
			ButtonStle: {
				type: Object,
				default: () => ({
					minWidth: '56px',
					height: '100%',
					padding: '0rpx 20rpx',
					lineHeight: '1rem',
					minHeight: '72rpx'
				})
			},
			slots: {
				type: Boolean,
				default: false
			},
			// 是否要状态栏 占位
			statusH: {
				type: Boolean,
				default: false
			},
			// tab按钮的父容器样式
			styleFather: {
				type: Object,
				default: () => ({})
			},
			//导航背景颜色
			navBg: {
				type: String,
				default: "#FFFFFF"
			},
			// 导航前边距
			previousMargin: {
				type: String,
				default: "0"
			},
			// 导航后边距
			nextMargin: {
				type: String,
				default: "0"
			},
			// 当前选择
			current: {
				type: Number,
				default: 0
			},
			// 选项卡 列表数据
			tabList: {
				type: Array,
				default: () => ({})
			},
			borderRadius: {
				type: String,
				default: '0'
			},
			Line: {
				type: Boolean,
				default: false
			},
			// 导航线样式
			LineStyle: {
				type: Object,
				default: () => ({
					backgroundColor: '#FDE080',
					borderRadius: "10rpx",
					bottom: '40rpx',
					height: '14rpx'
				})
			}
		},
		data() {
			return {
				scrollLeft: 0,
				itemWidth: 0,
				itemLeft: 0,
			};
		},
		watch: {
			current(val) {
				// this.setScrollLeft(val)
			}
		},
		created() {
			that = this;
			setTimeout(async () => {
				let nowElement = await that.getWidth('tabs-0');
				that.itemLeft = nowElement.left;
				if (that.itemWidth === 0) {
					that.itemWidth = nowElement.width;
				}
			})
		},
		methods: {
			// 更新滚动条位置
			setScrollLeft: async function(tabIndex, clicktype) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabs-' + i)
					leftWidthSum = leftWidthSum + nowElement.width;
				};
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth / 2 ? (leftWidthSum - winWidth / 2) : 0;
				if (clicktype) {
					this.$emit('tabClick', {
						item: this.tabList[tabIndex],
						index: tabIndex
					})
				}
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					let view = uni.createSelectorQuery().in(that).select("#"+id);
					const query = uni.createSelectorQuery().in(this);
					query.select("#"+id).boundingClientRect(data => {
						that.itemWidth = data.width;
						that.itemLeft = data.left;
						res(data);
					}).exec();
				})
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style scoped>
	.fixed{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;
		background-color: #ffffff;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		position: relative;
		height: 100%;
		/* height: 220rpx; */
	}

	.scroll-view-item_H {
		display: inline-block;
		motion: auto 0;
		/* text-align: center; */
		font-size: 36rpx;
		/* height: 76rpx; */
		/* background: red; */
	}
	.knowledgeNum{
		position: absolute;
		color: #EC808D;
		margin-left: 120rpx;
		font-weight: 700;
		font-style: normal;
		font-size: 12px;
		margin-top: -40rpx;
	}
	.underLine {
		position: absolute;
		/* bottom: 0; */
		/* left: 0; */
		height: 10rpx;
		transition: left 0.5s;
		/* margin-top: -20rpx; */
	}
	.underLine-b {
		height: 10rpx;
		/* text-align: center; */
		margin: auto;
		/* transition: left 0.5s; */
		transition: left 0.5s;
	}

	.status_bar {
		/* // 只在app中生效 */
		height: var(--status-bar-height);
		width: 100%;
		font-size: 12rpx;
	}
	
	scroll-view ::-webkit-scrollbar{
	  width: 0;
	  height: 0;
	  color: transparent;
	  display: none;
	}
</style>
